/*
 * Copyright 2021 Shulie Technology, Co.Ltd
 * Email: shulie@shulie.io
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.noLinkInfo {
  width: 100%;
  height: 40px;
  background-color: #505b6b;
  border: 1px solid #d7d8e1;
  border-radius: 4px;
  color: #9aacc8;
  font-size: 12px;
  padding: 0 16px;
  margin-bottom: 8px;
}

.noMiddleWareInfo {
  width: 100%;
  height: 40px;
  background-color: #f2f7fa;
  border: 1px solid #d7d8e1;
  border-radius: 4px;
  color: #a2a6b1;
  font-size: 12px;
  padding: 0 16px;
}

.middleWareCard {
  border-radius: 4px;
  background-color: #fff;
  color: #646676;
  border: 1px dotted #d7d8e1;
}

.enterChange {
  font-size: 12px;
  font-weight: 500;
  color: #fe7d61;
  width: 100%;
  height: 32px;
  line-height: 32px;
  padding-left: 16px;
  background: rgba(255, 241, 238, 0.08);
  border-radius: 4px;
  border: 1px dotted rgba(246, 125, 92, 1);
  margin-bottom: 8px;
}

.extraWrap {
  position: relative;
  margin-top: 8px;
  ::-webkit-scrollbar {
    display: none;
  }
  :global {
    .ant-collapse-icon-position-right
      > .ant-collapse-item
      > .ant-collapse-header {
      height: 44px;
    }

    .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
      background-color: rgba(19, 20, 21, 0.3);
      border-radius: 20px;
    }

    .ant-tree li .ant-tree-node-content-wrapper:hover {
      background-color: rgba(247, 249, 251, 0.1);
      border-radius: 20px;
    }
  }
}

.actionBtnWrap {
  position: absolute;
  right: 16px;
  top: 50px;
}

.detailTabsIns {
  font-size: 12px;
  color: #acb3b9;
  border-bottom: none;
  padding-top: 0;
  margin-top: 16px;

  :global {
    .ant-tabs-bar {
      border-bottom-color: transparent;
      color: rgba(172, 179, 185, 1);
    }
    .ant-tabs-nav .ant-tabs-tab {
      font-size: 12px;
      border-left: 1px solid #e0e0ea;
      text-align: center;
      margin-right: 0;
      padding-top: 0;
      padding-bottom: 0;
    }
    .ant-tabs-nav .ant-tabs-tab:hover {
      color: rgba(17, 187, 213, 0.8) !important;
    }
    .ant-tabs-tab:first-child {
      border-left: 0;
    }
    .ant-tabs-nav .ant-tabs-tab-active {
      font-size: 12px;
      font-weight: 500;
      color: #11bbd5;
      line-height: 22px;
    }

    .ant-tabs-nav .ant-tabs-ink-bar,
    .ant-tabs-nav .ant-tabs-ink-bar-no-animated {
      background-color: transparent !important;
    }

    .ant-tabs-nav .ant-tabs-tab:hover {
      color: rgba(17, 187, 213, 0.8);
    }
  }
}

.saveFooter {
  margin-top: 20px;
  text-align: right;
  position: fixed;
  background-color: #fff;
  padding: 8px 40px;
  bottom: 0;
  right: 0;
  width: calc(100% - 176px);
  box-shadow: 0px 2px 20px 0px rgba(92, 80, 133, 0.15),
    0px -4px 8px 0px rgba(222, 223, 233, 0.3);
  z-index: 1000;
  margin-right: 8px;
}

canvas {
  border: 0px;
  outline: none;
}

.linkDetailTable {
  :global {
    .ant-table-small
      > .ant-table-content
      > .ant-table-header
      > table
      > .ant-table-thead
      > tr
      > th,
    .ant-table-small
      > .ant-table-content
      > .ant-table-body
      > table
      > .ant-table-thead
      > tr
      > th,
    .ant-table-small
      > .ant-table-content
      > .ant-table-scroll
      > .ant-table-header
      > table
      > .ant-table-thead
      > tr
      > th,
    .ant-table-small
      > .ant-table-content
      > .ant-table-scroll
      > .ant-table-body
      > table
      > .ant-table-thead
      > tr
      > th,
    .ant-table-small
      > .ant-table-content
      > .ant-table-fixed-left
      > .ant-table-header
      > table
      > .ant-table-thead
      > tr
      > th,
    .ant-table-small
      > .ant-table-content
      > .ant-table-fixed-right
      > .ant-table-header
      > table
      > .ant-table-thead
      > tr
      > th,
    .ant-table-small
      > .ant-table-content
      > .ant-table-fixed-left
      > .ant-table-body-outer
      > .ant-table-body-inner
      > table
      > .ant-table-thead
      > tr
      > th,
    .ant-table-small
      > .ant-table-content
      > .ant-table-fixed-right
      > .ant-table-body-outer
      > .ant-table-body-inner
      > table
      > .ant-table-thead
      > tr
      > th,
    .ant-table-small
      > .ant-table-content
      > .ant-table-header
      > table
      > .ant-table-tbody
      > tr
      > td,
    .ant-table-small
      > .ant-table-content
      > .ant-table-body
      > table
      > .ant-table-tbody
      > tr
      > td,
    .ant-table-small
      > .ant-table-content
      > .ant-table-scroll
      > .ant-table-header
      > table
      > .ant-table-tbody
      > tr
      > td,
    .ant-table-small
      > .ant-table-content
      > .ant-table-scroll
      > .ant-table-body
      > table
      > .ant-table-tbody
      > tr
      > td,
    .ant-table-small
      > .ant-table-content
      > .ant-table-fixed-left
      > .ant-table-header
      > table
      > .ant-table-tbody
      > tr
      > td,
    .ant-table-small
      > .ant-table-content
      > .ant-table-fixed-right
      > .ant-table-header
      > table
      > .ant-table-tbody
      > tr
      > td,
    .ant-table-small
      > .ant-table-content
      > .ant-table-fixed-left
      > .ant-table-body-outer
      > .ant-table-body-inner
      > table
      > .ant-table-tbody
      > tr
      > td,
    .ant-table-small
      > .ant-table-content
      > .ant-table-fixed-right
      > .ant-table-body-outer
      > .ant-table-body-inner
      > table
      > .ant-table-tbody
      > tr
      > td {
      padding: 4px 8px;
    }

    .ant-table-tbody > tr > td {
      border: 1px solid #fafbfd;
    }
  }
}

.unknowNodeWrap {
  margin-top: 16px;
  :global {
    .ant-collapse-header {
      background-color: #fff;
    }
    .ant-collapse-content {
      border-top: none;
    }
    .ant-collapse-content > .ant-collapse-content-box {
      padding: 0 16px 16px;
    }
  }
}

:global {
  .ant-table-row {
    &.no-expand {
      .ant-table-row-expand-icon {
        display: none;
      }
    }

    &.no-expand + .ant-table-expanded-row {
      display: none;
    }
  }
}

.siderBg {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0px 5px 16px 4px rgba(177, 192, 192, 0.15),
    0px 3px 6px 0px rgba(177, 192, 192, 0.2),
    0px 1px 2px -2px rgba(177, 192, 192, 0.2);
  background: #fff;
  // padding: 16px;
}

.actions {
  position: absolute;
  display: flex;
  z-index: 99;
  top: 8px;
  .siderIcon {
    // padding: 8px;
    width: 32px;
    height: 32px;
    // background: #11bbd5;
    box-shadow: 0px 0px 12px 0px rgba(177, 192, 192, 0.45);
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    line-height: 32px;
    svg {
      font-size: 16px;
      color: #393B4F;
      font-weight: bold;
    }
  }
}

.icon {
  :global {
    svg {
      font-size: 18px;
    }
  }
}

.collspane {
  margin-bottom: 16px !important;
  border: 1px solid #f0f0f0 !important;
  background-color: initial !important;
  .collspaneTitle {
    position: relative;
    &::before {
      content: '';
      display: block;
      position: absolute;
      width: 4px;
      height: 16px;
      background: #11bbd5;
      border-radius: 0px 100px 100px 0px;
      top: 0;
      left: -16px;
    }
  }
  :global {
    .ant-collapse-content {
      border: none;
      .ant-collapse-content-box {
        padding-top: 0;
      }
    }
    .ant-collapse-item {
      border-bottom: none !important;
    }
  }
}

.table {
  :global {
    .ant-table-thead {
      tr {
        th {
          background: none;
        }
      }
    }
    .ant-table-thead > tr > th,
    .ant-table-tbody > tr > td {
      word-break: break-all;
      border-bottom: 1px solid #f6f6f6;
    }
    .ant-table-column-title {
      color: #9e9e9e !important;
    }
    .ant-table-tbody > tr > td {
      color: #434343;
      // font-weight: 600;
    }
  }
}

.nodeInfoDrawer {
  // margin-right: 8px;
  :global {
    .ant-drawer-close {
      right: -15px;
      top: -10px;
    }
    .ant-drawer-content-wrapper {
      box-shadow: 0px 0px 12px 0px rgba(177, 192, 192, 0.45) !important;
    }
    .ant-drawer-content {
      border-radius: 4px;
    }
  }
}

.tabBar {
  border: 1px solid #f0f0f0;
  padding: 10px 16px;
  margin-bottom: 16px;
  display: flex;
  .tabBarItem {
    flex: 1;
    cursor: pointer;
    text-align: center;
    color: #9e9e9e;
  }
}

.leftIcon {
  :global {
    svg {
      font-weight: bold;
      font-size: 16px;
      margin-right: 8px;
    }
  }
}

.popover {
  position: relative;
  padding-left: 5px;
  // transform: translateY(-5px);
  :global {
    .ant-popover-arrow {
      display: none;
    }
    .ant-popover-inner-content {
      max-height: 400px;
      overflow: auto;
    }
  }
}

.select {
  :global {
    .ant-select-dropdown-menu-item {
      text-overflow: initial;
      white-space: break-spaces;
      word-break: break-all;
    }
  }
}
.missingDataWrap {
  position: relative;
  .title {
    font-size: 16px;
    font-weight: 600;
    color: #434343;
  }
  .subTitle {
    font-weight: 400;
    color: #595959;
  }
  .rightIcon {
    position: absolute;
    right: 0;
    top: 10px;
  }
}

.actionWrap {
  p {
    width: 50px;
    height: 36px;
    line-height: 36px;
    cursor: pointer;
  }

  p:first-child {
    border-bottom: 1px solid #ddd;
  }
}

.infoBar {
  text-align: center;
  line-height: 40px;
  background: #d4ebef;
  font-weight: 600;
  color: #11bbd5;
  font-size: 13px;
  position: relative;
  .num {
    margin: 0 4px;
    font-weight: bold;
    font-size: 14px;
    color: #474c53;
  }
  .close {
    position: absolute;
    top: 50%;
    right: 30px;
    cursor: pointer;
    transform: translateY(-50%);
  }
}
